Buttons

Create a button with a button or a element to retain the native click function. Use a disabled attribute when a button can’t be clicked.

BaseBase › ResetBase › NeutralBase › Neutral disabledBase › Neutral with left iconBase › Neutral with right iconBase › BrandBase › Brand disabledBase › DestructiveBase › Destructive disabledBase › InverseBase › Inverse disabledBasedev ready

Preview

Code

<button class="slds-button">Button</button>

The base .slds-button looks like a plain text link. It removes all the styling of the native button. It’s typically used to trigger a modal or display a “like” link. All button variations are built by adding another class to .slds-button.

Add the .slds-button--neutral class to create a neutral button, which has a white background and gray border.

Use a neutral icon button is for buttons with an icon on the left or right (not for stateful buttons). Add the .slds-button--neutral class to .slds-button.

The SVG inside receives the .slds-button__icon class. You can position the icon on the right or the left using .slds-button__icon--right or .slds-button__icon--left , which apply the correct amount of space between the icon and the text.

To create the brand button, add the .slds-button--brand class to the .slds-button class.

To create the destructive button, add the .slds-button--destructive class to the .slds-button class.

Use the inverse button on dark backgrounds. Add the .slds-button--inverse class to the .slds-button class.

StatefulStateful › Neutral - Not SelectedStateful › Neutral - SelectedStateful › Inverse - Not SelectedStateful › Inverse - SelectedStateful › Icon - Not SelectedStateful › Icon - SelectedStatefuldev ready

Preview

Code

<button class="slds-button slds-button--neutral slds-not-selected" aria-live="assertive">
  <span class="slds-text-not-selected">
    <svg aria-hidden="true" class="slds-button__icon--stateful slds-button__icon--left">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#add"></use>
    </svg>Follow</span>
  <span class="slds-text-selected">
    <svg aria-hidden="true" class="slds-button__icon--stateful slds-button__icon--left">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
    </svg>Following</span>
  <span class="slds-text-selected-focus">
    <svg aria-hidden="true" class="slds-button__icon--stateful slds-button__icon--left">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
    </svg>Unfollow</span>
</button>

The stateful button requires the .slds-button--neutral class in addition to the .slds-button class.

The stateful inverse button works just like the stateful button. It requires the .slds-button--inverse class in addition to the .slds-button class.

It uses the class .slds-not-selected in its initial state. When the user activates the button, use JavaScript to toggle the class to .slds-is-selected. The button contains three spans with classes that hide or show the content of the spans based on the class on the button. Each span contains text and a corresponding icon. The SVG will have the .slds-button__icon--stateful class as well as the .slds-button__icon--left class setting the icon on the left.

Stateful icons can be toggled on and off and retain their state. Like stateful buttons, the initial state is .slds-not-selected, and JavaScript is used to toggle it to .slds-is-selected when activated.

Accessibility

For accessibility, include the attribute aria-live="assertive" on the button. The aria-live="assertive" attribute means the value of the &lt;span&gt; inside the button will be spoken whenever it changes.

IconIcon › DefaultIcon › DisabledIcon › Icon inversedIcon › Icon inversed disabledIcondev ready

Preview

Code

<button class="slds-button slds-button--icon">
  <svg aria-hidden="true" class="slds-button__icon">
    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#settings"></use>
  </svg>
  <span class="slds-assistive-text">Settings</span>
</button>

The various button icons vary in the amount of space they use on the page. Some have background colors, and some are transparent.

The classes added to each button are added to the base .slds-button class. The <svg> inside the buttons all have the base class of .slds-button__icon.

A hint button is grayed out until its parent is hovered over. Then the hover and focus states are just like a regular icon button.

The parent element must have the class .slds-hint-parent, and the icon inside the button has the class .slds-button__icon--hint.

Use the small button with the down icon in rows and action menus. Add the class .slds-button--icon-x-small on the button. Use .slds-button__icon--small for the inside icon.

Accessibility

Icons without identifying text must have descriptive text in a .slds-assistive-text.

Icon SizeIcon Size › DefaultIcon Size › LargeIcon Size › SmallIcon Size › x-SmallIcon Sizedev ready

Preview

Code

<button class="slds-button slds-button--icon">
  <svg aria-hidden="true" class="slds-button__icon">
    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#settings"></use>
  </svg>
  <span class="slds-assistive-text">Settings</span>
</button>

Icon ContainerIcon Container › No borderIcon Container › With borderIcon Container › Filled — with borderIcon Container › Inverse - with borderIcon Containerdev ready

Preview

Code

<button class="slds-button slds-button--icon-container">
  <svg aria-hidden="true" class="slds-button__icon">
    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
  </svg>
  <span class="slds-assistive-text">More Options</span>
</button>

Icon Container SizeIcon Container Size › DefaultIcon Container Size › SmallIcon Container Size › x-SmallIcon Container Size › xX-SmallIcon Container Sizedev ready

Preview

Code

<button class="slds-button slds-button--icon-border">
  <svg aria-hidden="true" class="slds-button__icon">
    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
  </svg>
  <span class="slds-assistive-text">More Options</span>
</button>

Icon With Hint HoverIcon With Hint Hover › Default with no borderIcon With Hint Hover › Container with borderIcon With Hint Hover › Inverse with no borderIcon With Hint Hover › Inverse container with borderIcon With Hint Hoverdev ready

Preview

Code

<div class="slds-hint-parent">
  <button class="slds-button slds-button--icon">
    <svg aria-hidden="true" class="slds-button__icon slds-button__icon--hint">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
    </svg>
    <span class="slds-assistive-text">More Options</span>
  </button>
</div>

Icon With DropdownIcon With Dropdown › DefaultIcon With Dropdown › InverseIcon With Dropdowndev ready

Preview

Code

<button class="slds-button slds-button--icon-more">
  <svg aria-hidden="true" class="slds-button__icon">
    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#settings"></use>
  </svg>
  <svg aria-hidden="true" class="slds-button__icon slds-button__icon--x-small">
    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
  </svg>
  <span class="slds-assistive-text">More settings</span>
</button>

Component Overview

Accessibility

If an icon button doesn’t include a label, use a span with .slds-assistive-text to describe the icon for screen readers.

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to create buttons.
Class NameUsage
.slds-button
Applied to:

button or link

Outcome:

Initializes a 2rem (32px) height button

Required:

Required

Comments:

This neutralizes all the base styles making it look like a text link

.slds-button--small
Deprecated
Applied to:

.slds-button

Outcome:

Deprecated.

Required:

No, optional element or modifier

Comments:

--

.slds-button--neutral
Applied to:

.slds-button

Outcome:

Creates the gray border with white background default style

Required:

No, optional element or modifier

Comments:

--

.slds-button--brand
Applied to:

.slds-button

Outcome:

Creates the brand blue Salesforce style

Required:

No, optional element or modifier

Comments:

--

.slds-button--destructive
Applied to:

.slds-button

Outcome:

Creates a red button style

Required:

No, optional element or modifier

Comments:

The use case for this button is things like delete, cancel, and end call rather than errors.

.slds-button--inverse
Applied to:

.slds-button

Outcome:

Creates the inverse style for dark backgrounds

Required:

No, optional element or modifier

Comments:

--

.slds-button--icon
Applied to:

.slds-button

Outcome:

Creates a button that looks like a plain icon

Required:

No, optional element or modifier

Comments:

This is 1rem×1rem like an icon, not a regular button

.slds-button--icon-bare
Deprecated
Applied to:

.slds-button

Outcome:

Creates a button that looks like a plain icon

Required:

No, optional element or modifier

Comments:

This is 1rem×1rem like an icon, not a regular button

.slds-button--icon-container
Applied to:

.slds-button

Outcome:

Creates a button that looks like a plain icon

Required:

No, optional element or modifier

Comments:

This is 2rem×2rem (32px) like a button

.slds-button--icon-border
Applied to:

.slds-button

Outcome:

Creates an icon button with a border

Required:

No, optional element or modifier

Comments:

This is 2rem×2rem (32px) like a button, there is no background color until hover for this style

.slds-button--icon-border-filled
Applied to:

.slds-button

Outcome:

Creates an icon button with a border

Required:

No, optional element or modifier

Comments:

This is 2rem×2rem (32px) like a button

.slds-button--icon-inverse
Applied to:

.slds-button

Outcome:

Gives a white icon color on a dark background

Required:

No, optional element or modifier

Comments:

When used alone it has a subtle hover. When used in a button-group it assumes the hover state of the buttons next to it.

.slds-button--icon-border-inverse
Applied to:

.slds-button

Outcome:

Creates an icon button with a white border

Required:

No, optional element or modifier

Comments:

There is no background color.

.slds-button--icon-small
Applied to:

.slds-button

Outcome:

Creates an icon button at the smaller 1.5rem (24px) size

Required:

No, optional element or modifier

Comments:

--

.slds-button--icon-x-small
Applied to:

.slds-button

Outcome:

Creates an icon button at the smaller 1.25rem (20px) size

Required:

No, optional element or modifier

Comments:

--

.slds-button--icon-xx-small
Applied to:

.slds-button

Outcome:

Creates an icon button at the smaller 1rem (16px) size

Required:

No, optional element or modifier

Comments:

--

.slds-button--icon-more
Applied to:

.slds-button

Outcome:

Used for the style where only two icons are in a button

Required:

No, optional element or modifier

Comments:

This is usually an icon with a down arrow icon next to it. Each svg within is sized separately

.slds-button__icon
Applied to:

svg

Outcome:

Sets the size and color of the icon inside a button

Required:

No, optional element or modifier

Comments:

--

.slds-button__icon--stateful
Applied to:

svg

Outcome:

This makes the icon the same color as the text in the button

Required:

No, optional element or modifier

Comments:

This is not used in addition to .slds-button__icon but instead of

.slds-button__icon--left
Applied to:

.slds-button__icon

Outcome:

Puts the icon on the left side of the button

Required:

No, optional element or modifier

Comments:

--

.slds-button__icon--right
Applied to:

.slds-button__icon

Outcome:

Puts the icon on the right side of the button

Required:

No, optional element or modifier

Comments:

--

.slds-button__icon--x-small
Applied to:

.slds-button__icon

Outcome:

Creates a .5rem (8px) size icon

Required:

No, optional element or modifier

Comments:

This is added to the icon inside the .slds-button, not the button itself

.slds-button__icon--small
Applied to:

.slds-button__icon

Outcome:

Creates a .75rem (12px) size icon

Required:

No, optional element or modifier

Comments:

--

.slds-button__icon--large
Applied to:

.slds-button__icon

Outcome:

Creates a 1.5rem (24px) size icon

Required:

No, optional element or modifier

Comments:

--

.slds-button__icon--hint
Applied to:

.slds-button__icon

Outcome:

Creates a grayed out icon until the parent is hovered

Required:

No, optional element or modifier

Comments:

The parent must have the .slds-hint-parent class applied

.slds-button__icon--inverse-hint
Applied to:

.slds-button__icon

Outcome:

Creates a grayed out icon until the parent is hovered for inversed dark backgrounds

Required:

No, optional element or modifier

Comments:

The parent must have the .slds-hint-parent class applied

.slds-button-space-left
Applied to:

button parent

Outcome:

Adds space on the left of a button wrapped in a parent

Required:

No, optional element or modifier

Comments:

Only required if the .slds-button is wrapped. ie- to include a dropdown